<template>
	<view class="container">
		<view class="tabs">
			<view :class="{active:type==0}" @click="changeTab(0)">服务记录</view>
			<view :class="{active:type==1}" @click="changeTab(1)">消费记录</view>
		</view>
		<view class="date-box">
			<view class="date-btn" @click="changeDays('all')" :class="{active:time=='all'}">全部</view>
			<view class="date-btn" @click="changeDays('today')" :class="{active:time=='today'}">今日</view>
			<view class="date-btn" @click="changeDays('month')" :class="{active:time=='month'}">本月</view>
			<view class="time" @click="showDateSelect(1)">{{timea?timea:'开始时间'}}<tui-icon name="calendar" :size="15" margin="0 0 0 5px"></tui-icon></view>
			<view class="time" @click="showDateSelect(2)">{{timeb?timeb:'结束时间'}}<tui-icon name="calendar" :size="15" margin="0 0 0 5px"></tui-icon></view>
		</view>
		<tui-datetime :type="2" ref="dateTime" @confirm="changeTime"></tui-datetime>
		<view class="total">
			<view class="t1" v-if="type ==0">
				<view class="">
					<view class="tit">
						服务金额
					</view>
					<view class="redtxt">
						<text>￥</text>{{total.t1}}
					</view>
				</view>
				<view class="">
					<view class="tit">
						服务次数
					</view>
					<view class="blacktxt">
						{{total.t2}}次
					</view>
				</view>
			</view>
			<view class="t1" v-if="type ==1">
				<view class="">
					<view class="tit">
						消费金额
					</view>
					<view class="redtxt">
						<text>￥</text>{{total.t1}}
					</view>
				</view>
				<view class="">
					<view class="tit">
						消费次数
					</view>
					<view class="blacktxt">
						{{total.t2}}次
					</view>
				</view>
			</view>
			<view class="t2"  v-if="type ==1">
				<view><text>卡项</text>￥{{total.t3}}</view>
				<view><text>零售</text>￥{{total.t4}}</view>
			</view>
		</view>
		<view class="logs">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scroll" :style="{height:scrollHeight+'px'}">
				<view class="scroll-item" v-for="(item,idx) in logsList" :key="item.id" @click="openOrder(item.id)">
					<view class="datetime">
						{{item.create_time}}
						<text>￥{{item.fee}}</text>
					</view>
					<view class="goods-box">
						<view class="goods" v-for="(goods,index) in item.goods" :key="index">
							<view class="type">{{typename[item.type]}}</view>
							<view class="name">{{goods.name}}</view>
							<view class="num">X{{goods.num}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logsList:[],
				mid:5,
				type:1,
				scrollTop:0,
				last_page:2,
				page:1,
				time:'all',
				timea:'',
				timeb:'',
				current_time_index:null,
				total:{t1:0.00,t2:0,t3:0.00,t4:0.00},
				typename:['零售','卡类','服务'],
				scrollHeight:500,
			}
		},
		onLoad(opt){
			this.mid = opt.mid;
			let obj = {};
			uni.getSystemInfo({
				success: (res) => {
					// this.width = obj.left || res.windowWidth;
					// this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					// this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// // this.scrollH = res.windowWidth * 0.6
					// console.log(res.windowHeight);
					this.scrollHeight = res.windowHeight -222;
				}
			})
		},
		onShow(){
			this.getLogs();
			this.getTotal();
		},
		methods: {
			changeTab(val){
				this.type =val;
				this.time="all";
				this.timea='';
				this.timeb='';
				this.page=1;
				this.last_page=2;
				this.logsList=[];
				this.getLogs();
				this.getTotal();
			},
			changeDays(v){
				this.time=v;
				this.timea='';
				this.timeb='';
				this.page=1;
				this.logsList=[];
				this.getLogs();
				this.getTotal();
			},
			showDateSelect(v){
				this.current_time_index =v;
				this.$refs.dateTime.show();
			},
			changeTime(e){
				// e.result
				console.log(e.result);
				if(this.current_time_index==1){
					this.timea =e.result
				}
				if(this.current_time_index==2){
					this.timeb =e.result
				}
				if(this.timea && this.timeb){
					this.time = this.timea+','+this.timeb
					this.page=1;
					this.logsList=[];
					this.getLogs();
					this.getTotal();
				}
			},
			getLogs(){
				if(this.page > this.last_page){return false;}
				this.tui.get('user/order/log',{type:this.type,mid:this.mid,page:this.page,time:this.time}).then(res=>{
					this.page++
					this.last_page = res.data.last_page;
					this.logsList = [...this.logsList,...res.data.data];
				})
			},
			getTotal(){
				this.tui.get('user/order/total',{type:this.type,mid:this.mid,time:this.time}).then(res=>{
					this.total = res.data;
				})
			},
			scroll(){
				//上拉加载更多
				this.getLogs()
			},
			openOrder(id){
				uni.navigateTo({
					url:'../myOrder/detail?oid='+id
				})
			},
			
		}
	}
</script>

<style>
	.container .tabs{background-color: #FFFFFF;width: 100%;padding: 15px;}
	.tabs>view{width: 50%;display: block;float: left;text-align: center;font-size: 14px;}
	.tabs>view.active{color:#fe1a4b;font-weight: 700;position: relative;}
	.tabs>view.active::after{color:#fe1a4b;font-weight: 700;content: '';position: absolute;bottom: -10px;height: 2px;width: 60px;background-color: #fe1a4b;left: calc(50% - 30px);}
	.date-box{width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;background-color: #FFFFFF;padding: 10px 15px;box-sizing: border-box;}
	.date-box>view.date-btn{background: #EEEEEE;font-size: 12px;padding: 5px 10px;}
	.date-box>view.date-btn.active{background: #fe1a4b;font-size: 12px;padding: 5px 10px;color: #FFFFFF;}
	.date-box .time{font-size: 12px;color: #999;background-color: #F8F8F8;padding: 5px;}
	.total{margin: 10px;background-color: #FFFFFF;border-radius: 10px;}
	.t2,.t1{display: flex;justify-content: space-between;align-items: center;padding:10px 15px;color: #999999;}
	.total .t1>view{width: 50%;font-size: 12px;}
	.t2>view{width: 50%;font-size: 14px;color: #333333;}
	.t2>view>text{color: #999999;padding-right: 15px;}
	.t1>view>.redtxt{color: #FE1A4B;font-size: 24px;}
	.t1>view>.blacktxt{color: #000;font-size: 24px;}
	.t1>view>.redtxt text{color: #FE1A4B;font-size: 10px;}
	.scroll-item{border-radius: 10px;padding: 15px;background-color: #FFFFFF;margin: 0 10px 10px 10px;box-sizing: border-box;}
	.scroll-item .datetime{font-size: 14px;font-weight: 700;width: 100%;}
	.scroll-item .datetime>text{float: right;}
	.scroll-item .goods-box{padding: 10px 0;}
	.scroll-item .goods-box .goods{display: flex;justify-content: flex-start;padding: 5px;color: #666;font-size: 14px;}
	.scroll-item .goods-box .goods .type{background-color: #fee3e4;color: #ff5465;font-size: 12px;padding:3px 5px;margin-right: 10px;}
	.scroll-item .goods-box .goods .num{font-size: 12px;margin-left: auto;}
	
</style>
